<template>
	<view class="sort">
		<view class="header bg-white">
			<navigator  hover-class="none" url="/"  class="home-icon-display-area">
				<u-image width="30rpx" height="30rpx" style="margin: 0 auto;" src="/static/images/home-icon.png"></u-image>
			</navigator>
			<navigator hover-class="none" url="/pages/goods_search/goods_search" style="width: 100%;">
				<u-search placeholder="搜索商品" bg-color="#F4F4F4" :disabled="true"></u-search>
			</navigator>
		</view>
		<view class="content">
			<cate-one  v-if="appConfig.cate_style == 2" :list="cateList"></cate-one>
			<cate-two v-if="appConfig.cate_style == 3" :list="cateList"></cate-two>
			<cate-three v-if="appConfig.cate_style == 4" :list="cateList"></cate-three>
			<cate-four v-if="appConfig.cate_style == 1" :list="cateList"></cate-four>
			<!-- <u-popup v-model="cartProductDisplayStatus" mode="bottom" border-radius="10rpx" :height="cartProductDisplayHeight + 'px'">
				<view v-for="(item, index) in cartLists" :key="index" class="cart-list" style="padding-bottom: 200rpx;">
					<view class="title ">
						<view class="name">
							已选商品
						</view>
						<view class="del acea-row row-middle">
							<u-icon name="trash"></u-icon>
							清空
						</view>
					</view>
					<view class="cart-item bg-white" :class="{invalid: item.cart_status != 0}">
						<view class="select row-between sm muted" v-if="item.cart_status != 0">
							已失效
							<view :data-cartid="item.cart_id" @click="changeDelPopup(item.cart_id)">
								<image class="icon-xl" src="/static/images/icon_del.png" />
							</view>
						</view>
						<view class="row" style="padding: 20rpx" @tap="goPage" :data-url="'/pages/goods_details/goods_details?id=' + item.goods_id">
							<custom-image width="180rpx" height="180rpx" radius="10rpx" class="goods-img mr20" lazy-load :src="item.img" />
							<view class="info" style="flex: 1">
								<view class="line2 nr">{{item.name}}</view>
								<view class="muted xs line1 mt10">
									{{item.spec_value_str}}
								</view>
								<view class="row-between mt20">
									<view class="price row primary">
										<price-format :price="item.price" :firstSize="32" :secondSize="32" :showSubscript="true" :subscriptSize="32"></price-format>
									</view>
									<view class="cartNum" @tap.stop="">
										<u-number-box :disabled="item.cart_status != 0" v-model="item.goods_num" :min="1" async-change integer @change="countChange($event, item.cart_id)" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup> -->
			<!-- <view class="footer acea-row row-between-wrapper">
				<view class="shopping-basket">
					<u-badge type="error" v-if="cartProductNumber >= 1" :count="cartProductNumber" style="right: 0;"></u-badge>
					<u-image width="124rpx" height="106rpx" v-if="cartProductNumber >= 1" src="/static/images/shopping-basket-s.png" @tap="cartProductDisplayStatus = true"></u-image>
					<u-image width="124rpx" height="106rpx" v-if="cartProductNumber <= 0" src="/static/images/shopping-basket.png"></u-image>
				</view>
				<view class="money">
					￥<text class="num" v-html="cartProductMoney"></text>
				</view>
				<view class="bnt" v-if="cartProductNumber >= 1" @tap="goToConfirm">
					去结算
				</view>
				<view class="bnt-tow" v-if="cartProductNumber <= 0" @tap="goToConfirm">
					请选择产品
				</view>
			</view> -->
		</view>
		<tabbar :current="1"/>
	</view>
</template>

<script>
	import {
		getCartList,
		changeGoodsCount,
		getCatrgory
	} from '@/api/store';
	import {
		getRect,
		setTabbar
	} from '@/utils/tools';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				cateList: [],
				cartProductDisplayStatus:false,
				cartProductDisplayHeight:264,
				cartLists: [],
				cartProductNumber: 0,
				cartProductMoney: '0.00',
			};
		},

		components: {},
		onLoad(options) {
			setTabbar()
			this.getCatrgoryFun();
			this.getCartListFun();
		},
		onShow() {
			this.getCartNum()
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode
			};
		},
		methods: {
			...mapActions(['getCartNum']),
			getCatrgoryFun() {
				getCatrgory().then(res => {
					if (res.code == 1) {
						this.cateList = res.data
					}
				});
			},
			getCartListFun() {
				var _this = this;
				getCartList().then(res => {
					uni.stopPullDownRefresh({
						success: res => {}
					});
					if (res.code == 1) {
						_this.cartLists = res.data.lists;
						if(res.data.lists.length > 3){
							_this.cartProductDisplayHeight = 484;
						}else{
							_this.cartProductDisplayHeight = 154 + (res.data.lists.length * 110);
						}
						_this.cartProductMoney = res.data.total_amount;
						_this.cartProductNumber = res.data.total_num;
					}
				});
			},
			goToConfirm() {
				let {
					cartLists
				} = this;
				let goods = [];
				cartLists.forEach(item => {
					if (item.selected && item.cart_status == 0) {
						goods.push({
							item_id: item.item_id,
							num: item.goods_num
						});
					}
				});
				if (goods.length == 0) return this.$toast({
					title: '您还没有选择商品哦'
				});
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({goods, type:'cart'}))),
				})
			},
			countChange(number, cartId) {
				let cartid = cartId;
				changeGoodsCount({
					cart_id: cartid,
					goods_num: number
				}).then(res => {
					if (res.code == 1) {
						this.getCartListFun();
					}
			        else {
			            this.getCartListFun();
			        }
				})
			},
		},
		computed: {
			...mapGetters(["cartNum", "inviteCode", "appConfig"])
		}
	};
</script>
<style lang="scss">
	.home-icon-display-area{
		padding: 0 19rpx;
		// width: 68rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 50%;
		background-color: #f8f8f8;
		margin: 7px 0;
	}
	$header-height: 94rpx;
	$nav-height: 80rpx;
	page {


		.sort {
			.header {
				box-sizing: border-box;
				height: 128rpx;
				line-height: 128rpx;
				border-bottom: $-solid-border;
				padding: 18rpx 20rpx 18rpx 40rpx;
				display: flex;
				.search {
					flex: 1;
					height: 60rpx;

					input {
						flex: 1;
						height: 100%;
					}
				}
			}
			.content {
				height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
				
				.footer{
					width: 345px;
					position: fixed;
					left: 50%;
					margin-left: -172px;
					bottom: 17px;
					background-color: #282828;
					z-index: 1000;
					padding-left: 30rpx;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					height: 88rpx;
					border-radius: 60rpx;
					display: flex;
					.shopping-basket{
						position: relative;
						margin-top: -40rpx;
					}
					.money{
						font-size: 13px;
						font-weight: 700;
						margin-left: 16px;
						color: #fff;
						flex: 1;
						line-height: 88rpx;
						.num{
							font-size: 17px;
						}
					}
					.bnt,.bnt-tow{
						width: 180rpx;
						height: 100%;
						border-radius: 0 60rpx 60rpx 0;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						font-size: 28rpx;
					}
					.bnt{
						background: linear-gradient(270deg,#1db0fc,#22cafd);
					}
					.bnt-tow{
						background: #b2b2b2;
					}
				}
				.cart-list{
					.title{
						display: flex;
						height: 54px;
						line-height: 54px;
						padding: 0 30rpx;
						justify-content: space-between;
						.name{
							font-size: 14px;
							color: #282828;
							font-weight: 700;
						}
						.del{
							font-size: 13px;
							color: #a5a5a5;
						}
					}
				}
			}
		}
		
	}
</style>
